<?php $this->action("index","more","header");?>
       <div id="content">
            <div class="main">
    		<h1>&nbsp;</h1>

                
                
                
                
                

<div id="sp-setting" class="mod">
    <div class="hd">
    	<ul class="type-nav" style="text-align: left;">
					    <li><a href="<?php echo $this->getUrl("index","admin","info",array("siteid"=>$site_E->id));?>">资料</a></li>
					    <li  class="on"><a href="<?php echo $this->getUrl("index","admin","icon",array("siteid"=>$site_E->id));?>">图标</a></li>
					    <li><a href="<?php echo $this->getUrl("index","admin","room",array("siteid"=>$site_E->id));?>">房间</a></li>
					    <li><a href="<?php echo $this->getUrl("index","admin","design",array("siteid"=>$site_E->id));?>">设计</a></li>
					</ul>
    
    </div>
    <div class="bd">
        <form id="sp-setting-icon" action="<?php echo $this->getUrl("index","admin","iconupload",array("siteid"=>$site_E->id));?>" method="post" enctype="multipart/form-data"><div style="display:none;"><input type="hidden" name="ck" value="ZlMN"/></div>
            <div class="sp-icon" id="icon_0_0_100" >
                <img id="cropbox" src="<?php $logo =  $site_E->logo;if(empty($logo)) echo "/pics/site/icon_default_large.png"; else echo $site_E->getLargelogo();?>" alt="" />
            </div>
            <ul class="sp-icon-opt">

                <li>
                    <h2>从你的电脑里选择一张图片作为小站的图标</h2>
                    <p><input type="file" id="file-icon" name="picfile" /></p>
                </li>
                <li class="last">
                    <p class="clearfix">
                        <span class="icon-wrapper">
                            <img id="preview" class="sp-icon-s" src="<?php $logo =  $site_E->logo;if(empty($logo)) echo "/pics/site/icon_default_large.png"; else echo $site_E->getLargelogo();?>" />
                        </span>
                    </p>
                    <p class="submit-icon">
                        <span class="bn-flat-hot"><input id="submit-crop" type="submit" name="pf_submit" hidefocus="1" value="保存图标设置"></span>
                        <a href="http://site.douban.com/120150/" name="pf_cancel">取消</a>

                    </p>
                </li>
            </ul>
        </form>
    </div>
</div>                

<script>
    Do.add('Jcrop-css', {path: '/style/css/lib/jquery.Jcrop.css', type: 'css'});
    Do.add('Jcrop', {path: '/style/js/lib/jquery.Jcrop.min.js', type: 'js', requires: ['Jcrop-css']});
    Do.add('iframe-post-form-css', {path: '/style/css/lib/iframe-post-form.css', type: 'css'});
    Do.add('iframe-post-form', {path: '/style/js/lib/iframe-post-form.min.js', type: 'js', requires: ['iframe-post-form-css']});
    Do('Jcrop', 'iframe-post-form', function () {
        $(function(){
            var cropW = '',
                cropX = '',
                cropY = '',
                iconVer = 0,
                selectX = 0,
                selectY = 0,
                selectW = 100,
                oJcropApi = {},
                opicName = $('#cropbox').attr('src'),
                css_cropbox = '#cropbox',
                css_preview = '#preview',
                css_tips = '#upload-tips',
                css_error_tips = '.error-tips',
                css_holder = '.jcrop-holder',
                css_file_icon = '#file-icon',
                oSubmit = $('#submit-crop'),
                oForm = $('#sp-setting-icon'),
                oFileInput = $('#file-icon'),
                oCancel = $('a[name=pf_cancel]'),
                defaultPos = [ 0, 0, 100, 100 ],
                postUrl = location.pathname,
                siteName = $('body').attr('id'),
                currSize = $('.sp-icon').attr('id').split('_').slice(1, 4),
                settingUrl = postUrl.split('/').slice(0, 3).join('/') + '/',
                tmpl_upload_tips = '<p id="upload-tips">上传中，请稍候...</p>',
                tmpl_error_tips = '<p class="error-tips">图片短边尺寸不能小于100像素，请重新上传。</p>',
                initJcrop = function () {
                    // init setSelect value
                    if (currSize) {
                        selectX = parseInt(currSize[0]),
                        selectY = parseInt(currSize[1]),
                        selectW = parseInt(currSize[2]);
                    }
                    // init Jcrop
                    setTimeout(function () {
                        oJcropApi = $.Jcrop(css_cropbox, {
                            onChange: showPreview,
                            onSelect: showPreview,
                            aspectRatio: 1
                        }),
                        oJcropApi.animateTo([
                            selectX, selectY,
                            selectW, selectW 
                        ]);
                    }, 500);
                };

               if (!currSize[0]) {
                  currSize = [0,0,selectW];
               }
            function showPreview (coords) {
                if (parseInt(coords.w) > 0) {  
                    var rx = 48 / coords.w,
                        ry = 48 / coords.h;

                    cropW = coords.w,
                    cropX = coords.x,
                    cropY = coords.y;

                    $(css_preview).css({
                        width: Math.round(rx * $(css_cropbox).width()) + 'px',
                        height: Math.round(ry * $(css_cropbox).height()) + 'px',
                        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                        marginTop: '-' + Math.round(ry * coords.y) + 'px'
                    });
                }
            }

            initJcrop(); 
            // ajax upload
            oForm.iframePostForm({
                post: function () {
                    oJcropApi.destroy();
                    oJcropApi = {};
                    $(css_error_tips).remove();
                },
                complete: function (icon) { 
                    var data, realJson;
                    data = icon.match(/\{[^\}]+\}/)[0];
                    oFileInput.attr('disabled', 0);
                    if (!data) { return; }
                    realJson = eval('(' + data + ')');
                    if (realJson.error && !$(css_error_tips).length) {
                        oFileInput.parent().after(tmpl_error_tips);
                    }
                    iconVer = realJson.ver;
                    $(css_tips).remove();
                    $(css_cropbox + ', ' + css_preview).attr('src', realJson.pic);
                    setTimeout(function () {
                        oJcropApi = $.Jcrop(css_cropbox, { 
                            onChange: showPreview,
                            onSelect: showPreview,
                            aspectRatio: 1
                        });
                        oJcropApi.animateTo(defaultPos);
                    }, 500);
                }
            }).find(css_file_icon).change(function () {
                if (!$(css_tips).length) {
                    oFileInput.after(tmpl_upload_tips);
                }
                //oFileInput.attr('disabled', 1);
                $(this).parents('form').submit();
            });

            // submit crop value
            oSubmit.click(function (e) { 
                opicName = $('#cropbox').attr('src');
                e.preventDefault();
                $.post_withck(postUrl, {
                    'version': iconVer,
                    'name': opicName,
                    'imgpos': cropX + '_' + cropY + '_' + cropW
                }, function () {
                  		alert("图像保存成功");
                });
            });

            oCancel.click(function (e) {
                e.preventDefault();
                location.href = '/' + siteName + '/admin/';
            });
        });
    });
</script>

            </div>
            <div class="aside">
                

            </div>
            <div class="extra">
                
            </div>
        </div>
 <?php $this->partial("/Tpl/Index/MoreAction/doFooter.htm");?>        
</body>
</html>























